<template>
  <div class="logibox layout-login">
    <div class="login-page">
      <div class="login">
        <div class="login-inner">
          <img src="@/assets/images/login/left_top.png" alt="">
           <img src="@/assets/images/login/right_top.png" alt="">
            <img src="@/assets/images/login/left_b.png" alt="">
             <img src="@/assets/images/login/right_b.png" alt="">
          <div class="title">
            <h2>注册账号</h2>
          </div>
          <div class="p_tab" >
            <el-radio-group
                :disabled='canGetCode?false:true'
                v-model="registerData.type"
              >
                <el-radio label="1">手机注册</el-radio>
                <el-radio label='2'>邮箱注册</el-radio>
          </el-radio-group>
          </div>
          <div class="login-form">
            <el-form
                :model='registerData'
                label-position='top'
                @submit.native.prevent
              >
            <el-form-item :label='$t("label154")'>
              <el-input
                autocomplete='off'
                v-model.trim="registerData.account"
                :placeholder='$t("label158")'
                @blur="validate(registerData.account,'account')"
                maxlength="12"
              >
              </el-input>
            </el-form-item>
        <el-form-item
          v-show="registerData.type=='1'"
          :label='$t("cellphone")||"手机号"' 
        >
        <div class="">
          <div class="setlet_box">
            <el-form-item >
              <el-col :span="5" class="w150">
                <select v-model="areacode">
                  <option v-bind:value="item.code" v-for="(item,index) in phoneareaid"  :key="index">{{item.code}} {{item.cn}} {{item.en}}</option>
                </select>
              </el-col>
              <el-col class="line" :span="1"> <p class="p_cen">-</p></el-col>
              <el-col :span="15">
                <el-input
                  autocomplete='off'
                  v-model.trim="registerData.accountCode"
                  :placeholder='$t("mobilePlaceholder")||"请输入手机号"'
                  maxlength='11'
                  @blur="validate(registerData.accountCode,'accountCode')"
                >
                </el-input>
              </el-col>
            </el-form-item>
          </div>
        </div>
          
        </el-form-item>
        <el-form-item
          v-show="registerData.type=='2'"
          :label='$t("email")||"邮箱"'
        >
          <el-input
            autocomplete='off'
            v-model.trim="registerData.accountCode"
            :placeholder='$t("emailPlaceholder")||"请输入邮箱"'
            @blur="validate(registerData.accountCode,'accountCode')"
          >
          </el-input>
        </el-form-item>
        <!-- 发送验证码 -->
        <el-form-item :label='registerData.type=="1"?$t("mobileCode"):$t("label161")'>
          <div class="mobile-code-wrap p-rel">
            <el-input
              autocomplete='off'
              v-model="registerData.formCode"
              :placeholder='myCode?registerData.type=="1"?$t("mobileCodePlaceholder"):$t("emailCodePlaceholder"):$t("label170")'
              :disabled="!myCode"
            >
            </el-input>
            <div
              @click='sendCode'
              class="mobile-code abs-v-center color-dsend"
            >{{$t(this.codeTexti18n)}}{{second}}
            </div>
          </div>
        </el-form-item>
        <el-form-item :label='$t("loginPwd")||"登录密码"'>
          <el-input
            autocomplete='off'
            v-model="registerData.password"
            type='password'
            show-password
            :placeholder='$t("pwdPlaceholder")||"请输入密码"'
            @blur="validate(registerData.password,'password')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label='$t("loginRepass")||"确认登录密码"'>
          <el-input
            autocomplete='off'
            v-model="registerData.repassword"
            type='password'
            :placeholder='$t("pwdPlaceholder")||"请再次输入密码"'
            @blur="validate(registerData.repassword,'repassword')"
          >
          </el-input>
        </el-form-item>
        <el-form-item :label='$t("imgCode")||"图形验证码"'>
          <div class="code-wrap flex flex-between">
            <el-input
              autocomplete='off'
              v-model="registerData.verCode"
              :placeholder='$t("imgCodePlaceholder")||"请输入图形验证码"'
              @blur="validate(registerData.verCode,'verCode')"
            >
            </el-input>
            <div
              class="code"
              @click="createCode(verCodeNumArr,4)"
            >
              <ver-code
                :contentHeight='38'
                :identifyCode='verCodeStr'
              >
              </ver-code>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label='$t("recommender")||"邀请人（选填）"'>
          <el-input
            autocomplete='off'
            v-model="parentCode"
            :placeholder='$t("recommenderPlaceholder")||"请输入邀请人账号"'
          >
          </el-input>
        </el-form-item>
      </el-form>
          </div>
          <div
          :class="isAgreed?'active':''"
          class="agree flex flex-between"
        >
          <div>
            <i class="el-icon-circle-check"></i>
            <template v-if="$i18n.locale=='zh-CN'">
              <span>我已阅读并同意</span>
              <router-link to='/help_center/privacy' target="_blank">《用户使用协议》</router-link>
            </template>
            <template v-if="$i18n.locale=='en-US'">
              <span>I've read and agreed with the</span>
              <router-link to='/help_center/privacy' target="_blank">'User agreement'</router-link>
            </template>
          </div>
          <div class="bott_link">
            <router-link
              class="back"
              to='/user/login'
              v-text="$t('backToLogin')||'返回登录'"
            >
            </router-link>
          </div>
          
        </div>
          <div class="login-btn">
            <el-button type="primary" @click="formSubmit" v-text="$t('register')||'注册'"></el-button>
          </div>
        </div>
        <!-- QRCODE ----AD---- -->
        <!-- <div class="qrcodedown">
          <div class="qrbox">
            <vue-qr :text="downAppurl"  qid="testid" :size="60" :margin='5' ></vue-qr>
          </div>
          <div class="right-txt">
            <p class="toptip">交易所全球站App</p>
            <p class="toptip">随时随地 便捷交易</p>
            <p class="tips">扫描二维码下载交易所App</p>
          </div>
        </div> -->
      </div>

    </div>
    <div ref="auth"></div>
  </div>
</template>
<script>
import loginModal from "@/components/Login/LoginModal.vue";
import verCode from "@/components/other/verCode";
import VueQr from "vue-qr";
export default {
  components: { loginModal, verCode,VueQr },
  data() {
    const bg = require("@/assets/images/user/dl_bj.png");
    return {
      bg: `background-image:url(${bg})`,
      registerData: {
        type: "1",
        account: "",
        accountCode: "",
        password: "",
        repassword: "",
        formCode: "",
        verCode: "",
      },
      parentCode:'',

      myCode: true,
      codeText: "获取验证码",
      codeTexti18n: "getMsgCode",
      second: "",
      canGetCode: true,
      isAgreed: true,
      verCodeStr: "",
      getCodeTimes: 0,
      verCodeNumArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      canSubmit: false,
      IPS:"",
      areacode:'',
      phoneareaid:[],
      regtype:'',
      // 极验码
      myCaptcha:null,
      authToken:'',
    };
  },
  created() {
    //页面加载
    this.downAppurl= `${this.api.downAppurl}`;
  },
  mounted() {
    this.createCode(this.verCodeNumArr, 4);
    this.parentCode=this.$route.query.rid;
    this.getareacode();
    // this.initAuth();
  },

  methods: {
    // 验证码
    initAuth(){
      this.myCaptcha = _dx.Captcha(this.$refs.auth, {
        appId: '84fd16e0a01b295796a6f33e61fa7496', //appId，在控制台中“应用管理”或“应用配置”模块获取
        style:'popup',
        qLink:false,
        logoLink:false,
        success:(token)=>{
          // console.log('token:', token)
          this.authToken = token;
          this.myCaptcha.hide();
          // 验证成功发送验证码
          this.sendCode();
        }
      })
    },
    showAuthPopup(){
      if(this.registerData.type == "1"){
        if(!this.Util.isPhone(this.registerData.accountCode)){
          this.errMsg("请检查手机号码是否输入正确！");
          return;
        }
        this.myCaptcha.reload();
        this.myCaptcha.show();
      }else{
        if(!this.Util.isEmail(this.registerData.accountCode)){
          this.errMsg("请检查邮箱格式是否输入正确！");
          return;
        }
        this.myCaptcha.reload();
        this.myCaptcha.show();
      }
    },
    // 生成图片验证码
    createCode(arr, len) {
      let str = "";
      for (let i = 0; i < len; i++) {
        str += this.verCodeNumArr[
          this.Util.randomNum(0, this.verCodeNumArr.length)
        ];
      }
      this.verCodeStr = str;
    },
    formSubmit() {
      console.log(this.registerData);
      if (!this.Util.isUserName(this.registerData.account)) {
            this.errMsg("label159");
            this.canSubmit = false;
            return
      }
      for (let key in this.registerData) {
        let item = this.registerData[key];
        if (item == "" ||item==null) {
          // this.errMsg("请填写完整信息后提交");
          this.$notify.error({
              title: '错误',
              message: '请填写完整信息后提交'
          });
          return;
        }
      }
      //判断电话登录或者邮箱
      let actions;
      if(this.registerData.type=='1'){
        this.regtype='tel';
        actions = this.api.enrollfromtel
      }else{
        this.regtype='email';
        actions = this.api.enrollfromemail
      }
      if (!this.canSubmit) return;
      let postData = {
        type: this.regtype,
        member: this.registerData.account,
        tel: this.registerData.accountCode,
        email:this.registerData.accountCode,
        loginpassword: this.registerData.password,
        code: this.registerData.formCode,
        showLoading: true,
        parent: this.parentCode || null,
        areacode:this.areacode,
      };
   
      this.request(actions, postData).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg);
          this.navigateTo("/user/login");
        } else {
          this.errMsg(res.msg || "注册失败");
        }
      });
    },
    sendCode() {
      if (!this.canGetCode) return false;
      if(this.registerData.type == "1"){
        if(!this.Util.isPhone(this.registerData.accountCode)){
          this.errMsg("请检查手机号码是否输入正确！");
          return;
        }
      }else{
        if(!this.Util.isEmail(this.registerData.accountCode)){
          this.errMsg("请检查邮箱格式是否输入正确！");
          return;
        }
      }
      if (this.registerData.type == "1") {
        if(this.areacode==''){
          this.errMsg('请选择区号并填入手机号' || "选择区号");
          this.myCode = false;
          return
        }
        // this.areacode='86'
        // 手机验证码
        if (!this.Util.isPhone(this.registerData.accountCode)) {
            this.errMsg("label123");
            return
        }
        this.request(this.api.getcode, {
          token: this.registerData.accountCode,
          type:'registerbytel',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.myCode = true;
            this.successMsg(res.msg || "发送成功");
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      } else {
        //邮箱验证码
        if (!this.Util.isEmail(this.registerData.accountCode)) return false;
        this.areacode=0;
        this.request(this.api.getcode, {
          token: this.registerData.accountCode,
          type:'registerbyemail',
          ip:this.IPS,
          showLoading: true,
          areacode:this.areacode,
          autotoken:this.authToken,
        }).then(res => {
          if (res.code == "0") {
            this.successMsg(res.msg || "发送成功");
            this.myCode = true;
          } else {
            this.errMsg(res.msg || "获取验证码失败");
            this.myCode = false;
          }
        });
      }
      this.countDown();
    },
    // 倒计时函数
    countDown() {
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.second = `${t}s`;
          this.codeTexti18n = "countDown";
        },
        onCounting: t => {
          this.second = `(${t}s)`;
          this.codeTexti18n = "countDown";
        },
        onComplete: () => {
          this.canGetCode = true;
          if (this.getCodeTimes > 0) {
            this.codeTexti18n = "tryAgain";
            this.second = "";
          }
        }
      });
    },
    // 表单验证
    validate(val, name) {
      if (val == "") return;
      this.canSubmit = true;
      switch (name) {
        case "account":
          if (!this.Util.isUserName(val)) {
            this.errMsg("label159");
            this.canSubmit = false;
          }
          break;
        case "cellphone":
          if (!this.Util.isPhone(val) && !this.Util.isEmail(val)) {
            this.errMsg("label156");
            this.canSubmit = false;
          }
          break;
        case "verCode":
          if (val != this.verCodeStr) {
            this.errMsg("label126");
            this.canSubmit = false;
          }
          break;
      }
    },
    //验证方式切换 切换时初始化验证码发送定时器
    onTypeChage() {
      this.timer && clearInterval(this.timer);
      this.codeTexti18n = "getMsgCode";
      this.loginData.code = "";
      this.second = "";
      this.canGetCode = true;
      this.myCode = false;
    },
    // 区号
    getareacode() {
      this.request(this.api.areacode,{lang:'1'}).then(res => {
        if(res.code == '0') {
          this.phoneareaid = res.data;
          //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
          this.areacode = this.phoneareaid[0].code;
        }
      })
    },
  },
  watch: {
    "loginData.type": "onTypeChage"
  }
};
</script>
<style lang="scss" scoped>
.layout-login{
    background:url('~@/assets/images/login/bg1.png');
    
    height: 950px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #171c2c;
  .login {
    color: #263241;
    width: 526px;
    margin: 30px auto auto;
  
    
    .login-inner{
      border: 1px solid #0046a9;
      border-radius: 3px;
      background-color:rgba(206, 217, 238, 0.1);
      padding: 0 48px 48px;
     box-sizing: border-box;
      position: relative;
      img:nth-child(1){
        position: absolute;
        left: -4px;
        top: -4px;
      }
       img:nth-child(2){
        position: absolute;
        left: 488px;
        top: -4px;
      }
        img:nth-child(3){
        position: absolute;
        left: -4px;
       bottom: -2px;
        box-sizing: border-box;
      }
        img:nth-child(4){
        position: absolute;
        left: 488px;
       bottom: -2px;
        box-sizing: border-box;
      }
    }
    .title{
      font-size: 20px;
      height: 88px;
      line-height: 88px;
      text-align: center;
      h2{
        color: #fff;
      }
    }
    .forwordbox{
      .forret{color: #357ce1;cursor: pointer;}
    }
    .agree {margin-top: 10px;}
    .login-btn{
      margin-top: 15px;
      button{width: 100%;}
    }
  }
  //  qrad
  .qrcodedown{
    margin-top: 16px;
    overflow: hidden;
    border-radius: 3px;
    padding: 18px 24px;
    display: flex;
    // background-color: #334164;
    background-repeat: no-repeat;
    background-position: bottom right 24px;
    background-image: url(https://file.huobiasia.vip/global/zh-cn/static/img/e46bbe8.svg);
    .qrbox{
      width: 62px;
      height: 62px;
      padding: 2px;
      background: #fff;
    }
    .right-txt{
      margin-left: 15px;
      .toptip{color: #fff;font-size: 14px;margin-bottom: 7px;}
      .tips{
        color: #8199c3;
        font-size: 12px;
        margin-top: 15px;
      }
    }
  }
}
// 注册
.el-form-item{
   /deep/ .el-form-item__label{
    color: white ;
  }
  }
.p_tab{
  display: flex;
  padding-bottom:10px;
  span{font-weight: 600;}
  // .el-radio__input{display: none;}
  /deep/ .el-radio{
    color: white;
  }
  
 
}
.setlet_box{
  .w150{width: 140px;}
  select{height: 39px;border-radius: 4px;border-color: #C0C4CC;width: 140px;}
  .p_cen{text-align: center;}
}
.code{margin-left: 15px;}
.el-icon-circle-check{
  color: white;
 
}
.agree{
   span{
    color: white;

  }
  a{
    color: white;
  }

}
.el-form-item{
  color: white;
}
.bott_link{
  a{
    color: #357ce1;
  }
}
</style>